@baseBackGround: white;
@base: black;

.c7ntest-ExecuteDetailSide {
  width: 100%;
  background-color: @baseBackGround;
  height: 100%;
  position: relative;
  display: flex;
  overflow: hidden;

  .c7ntest-content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column; // overflow: hidden;    
    overflow: hidden;

    .c7ntest-content-top {
      box-sizing: border-box;
      width: 100%;
      flex-shrink: 0;
      padding: 0 .2rem;
    }

    .c7ntest-content-bottom {
      width: 100%;
      // width: 370px;
      flex: 1;
      overflow-y: scroll;
      overflow-x: hidden;
      padding: 0 .2rem .2rem;

      .c7ntest-side-item-header {
        margin-bottom: .11rem;
        display: flex;
        align-items: center;
        font-size: 16px;
        line-height: 0.22rem;
        justify-content: space-between;

        &-left {
          display: flex;
          align-items: center;
          font-weight: 500;
          white-space: nowrap;

          i {
            margin-right: 5px;
          }
        }

        &-line {
          height: 1px;
          background: rgba(0, 0, 0, 0.08);
          flex: 1;
          margin: 30px 0px 20px;
        }

        &-right {
          .c7n-btn {
            padding: 0 5px;
            margin-left: auto;
          }
        }
      }



      #detail {
        .c7ntest-side-item-content {
          display: flex;
          flex-wrap: wrap;
        }
      }

      .c7ntest-button-defect-select {
        .c7n-select-selection__rendered {
          // display: none;
          width: 300px;
          height: 20px;
          visibility: hidden;
        }

        .c7n-select {
          visibility: hidden; // display: none;
        }

        .c7ntest-TextEditToggle-text {
          padding: 0;
        }

        .dropdown {
          // width: 300px;
          // right: 10px !important;
        }

        // .c7ntest-TextEditToggle-edit {
        //   padding: 0;
        // }
      }
    }
  }

  .c7ntest-item-one-line {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: fade(@base, 65%);

    &-left {
      width: 100px;
      font-size: 14px;
      line-height: 20px;
    }

    &-right {
      color: @base;
      flex: 1;
      font-size: 14px;
      line-height: 20px;
      .c7ntest-TextEditToggle-text {
        padding: 0;
      }
    }
  }

  &[max-width~="600px"] {
    #detail {
      .c7ntest-item-one-line {
        width: 100%;
      }
    }
  }

  // .c7ntest-upload {

  // }
  &-divider {
    position: relative;
    box-sizing: border-box;
    background: padding-box rgb(122, 134, 154);
    opacity: 0.2;
    height: 100%;
    width: 11px;
    margin: 0 -4px;
    border-left: 5px solid rgba(255, 255, 255, 0);
    border-right: 5px solid rgba(255, 255, 255, 0);
    cursor: col-resize;

    &:before,
    &:after {
      content: "";
      display: block;
      position: absolute;
      background: white;
    }

    &:before {
      top: calc(~'50% - 13px');
      margin-top: 7px;
      margin-bottom: 7px;
      height: 26px;
      left: -2px;
      width: 3px;
      background: rgb(255, 255, 255);
    }

    &:after {
      top: calc(~'50% - 6px');
      margin-top: 7px;
      margin-bottom: 7px;
      height: 12px;
      left: -1px;
      width: 2px;
      border-left: 1px solid rgb(122, 134, 154);
      border-right: 1px solid rgb(122, 134, 154);
    }
  }
}
